<template>
	<view class="pages">
		<view class="list margin-bottom-sm" v-for="(item ,index) in list" :key="index">
			<view class="list-top padding-bottom-sm">
				<view class="list-con">
					<view class="list-con-text font-14 font-weight-700">
						车牌：{{ item.licensePlate }}
					</view>
					<view class="list-con-text font-14 font-weight-700">
						车型：{{ item.carName }}
					</view>
					<view class="list-con-text font-14 font-weight-700">
						座位：{{ item.carSeatNum }}
					</view>
					<view class="list-con-text font-14 font-weight-700">
						状态：{{ item.status == 0 ? '正常' : '维修' }}
					</view>
				</view>
				<uni-icons type="right" size="16"></uni-icons>
			</view>
			<view class="list-btns padding-top-sm">
				<view class="btn">
					<button type="primary" size="mini" @click="edit(item.id)">修改</button>
				</view>
				<view class="btn">
					<button type="warn" size="mini" @click="del(item.id)">删除</button>
				</view>
			</view>
		</view>
		<kevy-empty :show="true" type="data" v-if="list.length == 0"></kevy-empty>
		<view class="addBtn">
			<button type="primary" @click="add()" style="width: 400upx;border-radius: 60upx;">添加车辆</button>
		</view>
		<MyTabBar active="vehicle"></MyTabBar>
	</view>
</template>

<script>
	import { getList,del } from '@/api/system/vehicle'
	export default{
		data(){
			return {
				list: []
			}
		},
		onLoad() {
			this.getInit();
		},
		/**
		 * 下拉刷新
		 */
		onPullDownRefresh() {
			this.getInit();
			
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			getInit(){
				this.list = [];
				this.getData();
			},
			/**
			 * 获取数据
			 */
			getData() {
				this.$modal.loading("请求中");
				getList().then(res => {
					this.$modal.closeLoading()
					console.log(res);
					this.list = res.data;
				}).catch(err => {
					console.log('查询成功', err);
				});
			},
			/**
			 * 修改
			 */
			edit(id) {
				this.$tab.navigateTo(`/pages/vehicle/add?id=${id}`);
			},
			/**
			 * 删除
			 */
			del(id) {
				this.$modal.confirm('是否确认删除！').then(() => {
					this.$modal.loading("请求中");
					del(id).then(() => {
						this.$modal.closeLoading();
						this.$modal.msgSuccess('删除成功' , () => {
							setTimeout(() => {
								this.getInit();
							} , 2000);
						})
					}).catch(err => {
						console.log('删除失败', err);
					});
				});
			},
			/**
			 * 跳转
			 */
			add() {
				this.$tab.navigateTo('/pages/vehicle/add');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flexCenter {
		display: flex;
		align-items: center;
	}
	
	.flexCenterBetween {
		@extend .flexCenter;
		justify-content: space-between;
	}
	
	.list{
		background-color: #FFFFFF;
		padding: 20upx 40upx;
		
		.list-top{
			@extend .flexCenterBetween;
			
			.list-con{
				@extend .flexCenterBetween;
				flex-wrap: wrap;
				
				.list-con-text{
					width: 50%;
					line-height: 60upx;
				}
			}
		}
		
		.list-btns {
			@extend .flexCenter;
			justify-content: flex-end;
			border-top: 1px solid #E2E2E2;
		
			.btn:first-child {
				margin-right: 10upx;
			}
		}
	}
	
	.addBtn {
		position: fixed;
		bottom: 15%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>